<template>
  <view class="help-center">
    <view class="search-bar">
      <el-search v-model="keyword" placeholder="搜索帮助内容" @search="searchHelp"></el-search>
    </view>
    
    <view class="help-categories">
      <view class="category-item" v-for="(category, index) in helpCategories" :key="index" 
            @click="selectCategory(category.id)">
        <view class="category-name">{{ category.name }}</view>
        <view class="category-count">{{ category.count }}条</view>
      </view>
    </view>
    
    <view class="help-list">
      <view class="help-item" v-for="(help, index) in helpList" :key="index" 
            @click="goHelpDetail(help.id)">
        <view class="help-title">{{ help.title }}</view>
        <view class="help-time">{{ help.createTime }}</view>
      </view>
    </view>
    
    <el-empty v-if="helpList.length === 0" description="暂无帮助内容"></el-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      currentCategoryId: '',
      helpCategories: [],
      helpList: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  onLoad() {
    this.getHelpCategories()
    this.getHelpList(true)
  },
  onReachBottom() {
    if (this.hasMore) {
      this.page++
      this.getHelpList(false)
    }
  },
  methods: {
    async getHelpCategories() {
      try {
        const res = await this.$api.get('/help/categories')
        this.helpCategories = res
      } catch (error) {
        this.$toast.fail(error.message || '获取帮助分类失败')
      }
    },
    async getHelpList(refresh = false) {
      if (refresh) {
        this.page = 1
        this.hasMore = true
      }
      
      try {
        const res = await this.$api.get('/help/list', {
          categoryId: this.currentCategoryId,
          keyword: this.keyword,
          page: this.page,
          pageSize: this.pageSize
        })
        
        if (refresh) {
          this.helpList = res.list
        } else {
          this.helpList = [...this.helpList, ...res.list]
        }
        
        this.hasMore = res.list.length === this.pageSize
      } catch (error) {
        this.$toast.fail(error.message || '获取帮助列表失败')
      }
    },
    selectCategory(id) {
      if (this.currentCategoryId === id) {
        return
      }
      
      this.currentCategoryId = id
      this.getHelpList(true)
    },
    searchHelp() {
      this.getHelpList(true)
    },
    goHelpDetail(id) {
      uni.navigateTo({
        url: `/pages/help/detail?id=${id}`
      })
    }
  }
}
</script>

<style>
.help-center {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.search-bar {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 15px;
}
.help-categories {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 10px;
  margin-bottom: 15px;
}
.category-item {
  width: 33.33%;
  padding: 5px 10px;
  margin-bottom: 10px;
}
.category-name {
  background-color: #f8f8f8;
  border-radius: 20px;
  padding: 8px 15px;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.category-item.active .category-name {
  background-color: #3399ff;
  color: #fff;
}
.category-count {
  display: none;
}
.help-list {
  background-color: #fff;
  padding: 0 15px;
}
.help-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.help-item:last-child {
  border-bottom: none;
}
.help-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.help-time {
  font-size: 12px;
  color: #999;
}
</style>    